/**
 * 抓拍机
 * @author xiaoxujs
 */

import { Button, message } from "antd";
import { CardHtmlBox, LCPTItle, ListStyleModuleBox, PLCCanshuBox } from "../../style";
import { FC, useCallback, useEffect, useState } from "react";
import { getTlplTLaneQueryRoughPhotoParam, getTlplTLaneQueryTarePhotoParam } from "./api";
import { ITlplTLaneQueryRoughPhotoParam, ITlplTLaneQueryTarePhotoParam } from "./type";
import OneJLSetParamsModule from "./OneJLSetParamsModule";
import TwoJLSetParamsModule from "./TwoJLSetParamsModule";

const ZhuapaijiModule: FC<{
    laneId?: string; // 装车站ID
}> = ({
    laneId, // 装车站ID
}) => {
        /**
         * one
         */
        const [setZPJ1Show, setSetZPJ1Show] = useState(false); // 设置抓拍机参数设置弹窗one
        const [zpj1Parameters, setZpj1Parameters] = useState<ITlplTLaneQueryTarePhotoParam>(); //抓拍机参数数据one
        // LED屏幕数据
        const zpj1ParametersFun = useCallback(async () => {
            if (laneId) {
                const { code, msg, data } = (await getTlplTLaneQueryTarePhotoParam({
                    laneId: laneId,
                })) as { code: number; msg: string; data: ITlplTLaneQueryTarePhotoParam };
                if (code === 20000) {
                    setZpj1Parameters(data);
                } else {
                    message.error(msg);
                }
            }
        }, [laneId]);
        useEffect(() => {
            zpj1ParametersFun();
        }, [zpj1ParametersFun]);
        // 一次计量参数设置回调one
        const handleOneJLSetParamsCallback = () => {
            setSetZPJ1Show(false);
            zpj1ParametersFun();
        }
        /**
         * otwo
         */
        const [setZPJ2Show, setSetZPJ2Show] = useState(false); // 设置抓拍机参数设置弹窗one
        const [zpj2Parameters, setZpj2Parameters] = useState<ITlplTLaneQueryRoughPhotoParam>(); //抓拍机参数数据one
        // LED屏幕数据
        const zpj2ParametersFun = useCallback(async () => {
            if (laneId) {
                const { code, msg, data } = (await getTlplTLaneQueryRoughPhotoParam({
                    laneId: laneId,
                })) as { code: number; msg: string; data: ITlplTLaneQueryRoughPhotoParam };
                if (code === 20000) {
                    setZpj2Parameters(data);
                } else {
                    message.error(msg);
                }
            }
        }, [laneId]);
        useEffect(() => {
            zpj2ParametersFun();
        }, [zpj2ParametersFun]);
        // 2次计量参数设置回调two
        const handleTwoJLSetParamsCallback = () => {
            setSetZPJ2Show(false);
            zpj2ParametersFun();
        }



        return (
            <>
                <LCPTItle>
                    <div className="lcptitle-left-box">
                        <div className="gun"></div>
                        <div>抓拍机参数</div>
                    </div>
                </LCPTItle>
                <CardHtmlBox>
                    <div className="box-top">
                        <div className="box-top-title">一次计量</div>
                        <Button type="link" onClick={() => {
                            setSetZPJ1Show(true)
                        }}>
                            设置参数
                        </Button>
                    </div>
                    <PLCCanshuBox>
                        <ListStyleModuleBox>
                            <tr className="box-title-tr">
                                <th align="center">设备IP地址</th>
                                <th align="center">设备SDK端口号</th>
                                <th align="center">设备SDK用户名</th>
                                <th align="center">设备SDK密码</th>
                            </tr>
                            <tr className="box-tr">
                                <td align="center">
                                    {zpj1Parameters && (zpj1Parameters.tarePhotoIp || "--")}
                                </td>
                                <td align="center">
                                    {zpj1Parameters && (zpj1Parameters.tarePhotoPort || "--")}
                                </td>
                                <td align="center">
                                    {zpj1Parameters && (zpj1Parameters.tarePhotoUsername || "--")}
                                </td>
                                <td align="center">
                                    {zpj1Parameters && (zpj1Parameters.tarePhotoPassword || "--")}
                                </td>
                            </tr>
                        </ListStyleModuleBox>
                    </PLCCanshuBox>

                </CardHtmlBox>
                <CardHtmlBox>
                    <div className="box-top">
                        <div className="box-top-title">二次计量</div>
                        <Button type="link" onClick={() => {
                            setSetZPJ2Show(true)
                        }}>
                            设置参数
                        </Button>
                    </div>
                    <PLCCanshuBox>
                        <ListStyleModuleBox>
                            <tr className="box-title-tr">
                                <th align="center">设备IP地址</th>
                                <th align="center">设备SDK端口号</th>
                                <th align="center">设备SDK用户名</th>
                                <th align="center">设备SDK密码</th>
                            </tr>
                            <tr className="box-tr">
                                <td align="center">
                                    {zpj2Parameters && (zpj2Parameters.roughPhotoIp || "--")}
                                </td>
                                <td align="center">
                                    {zpj2Parameters && (zpj2Parameters.roughPhotoPort || "--")}
                                </td>
                                <td align="center">
                                    {zpj2Parameters && (zpj2Parameters.roughPhotoUsername || "--")}
                                </td>
                                <td align="center">
                                    {zpj2Parameters && (zpj2Parameters.roughPhotoPassword || "--")}
                                </td>
                            </tr>
                        </ListStyleModuleBox>
                    </PLCCanshuBox>
                </CardHtmlBox>
                {/* 设置LED参数 */}
                <OneJLSetParamsModule
                    open={setZPJ1Show}
                    handleSetLEDCallback={handleOneJLSetParamsCallback}
                    clickData={zpj1Parameters}
                    laneId={laneId}
                />
                <TwoJLSetParamsModule
                    open={setZPJ2Show}
                    handleSetLEDCallback={handleTwoJLSetParamsCallback}
                    clickData={zpj2Parameters}
                    laneId={laneId}
                />
            </>
        );
    }

export default ZhuapaijiModule;